import { useEffect } from 'react';
import { Table, Tag, Space } from 'antd';
import 'antd/lib/Table/style';
import { connect } from 'dva';
import { Link } from 'react-router-dom';
import { Form, Input, Button } from 'antd';

function EmployeeList({ employee, dispatch }) {
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
    },

    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Link to={'/employee/' + record.key}>修改</Link>
          <a
            onClick={() =>
              dispatch({
                type: 'employee/deleteE',
                payload: {
                  key: record.key,
                },
              })
            }
          >
            Delete
          </a>
        </Space>
      ),
    },
  ];
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 8,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
  const onFinish = (values) => {
    //提交的方法
    dispatch({
      type: 'employee/createEmployee',
      payload: {
        employee: {
          key: employee.length + 1,
          name: values.name,
          age: values.age,
          address: values.address,
        },
      },
    });
    alert('修改成功');
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <h1>List Page</h1>
      <Table dataSource={employee} columns={columns} />;
      <Form
        {...layout}
        name="basic"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item label="姓名" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="性别" name="sex">
          <Input />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            添加
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default connect(({ employee }) => ({ employee }))(EmployeeList);
